<template>
  <!-- ===== container start ===== -->
  <div class="container">
    <div class="banner flex flex-center">
      <div class="text-center">
        <h2>行业经典案例</h2>
        <p>橙券与企业深度融合，创造数字化未来</p>
      </div>
    </div>
    <ul class="case w-1200 flex flex-column flex-between">
      <li>
        <img src="@/assets/img/case-1.png" width="427" height="540" alt="!" />
        <div>
          <h4>金融行业</h4>
          <div>
            <p>合作对象</p>
          </div>
          <p>
            中国银联、中国农业银行、中国邮政储蓄银行、中国银行、中国工商银行、交通银行、浦发银行、哈银消费金融公司、51信用卡
          </p>
          <div>
            <p>品牌支持</p>
          </div>
          <p>橙金融</p>
          <div>
            <p>服务内容</p>
          </div>
          <p>
            橙券为客户搭建营销活动，银行的手机银行及网银用户可通过参与活动，获得不同频次抽奖礼券，凭抽奖礼券随机抽取话费、流量、星巴克等奖品，打造具有生动营销力的传播。
          </p>
        </div>
      </li>
      <li>
        <img src="@/assets/img/case-2.png" width="427" height="540" alt="!" />
        <div>
          <h4>互联网行业</h4>
          <div>
            <p>合作对象</p>
          </div>
          <p>腾讯、京东PLUS、支付宝、搜狐邮箱、好时巧克力、乐麦</p>
          <div>
            <p>品牌支持</p>
          </div>
          <p>橙营销</p>
          <div>
            <p>服务内容</p>
          </div>
          <p>
            橙券为品牌线上商城旗舰店提供权益商品和技术支撑，多种选择，稳定货源支持，充分调动用户参与积极性，与用户形成良好互动，拉新促销，驱动企业业绩提升。
          </p>
        </div>
      </li>
      <li>
        <img src="@/assets/img/case-3.png" width="427" height="540" alt="!" />
        <div>
          <h4>保险行业</h4>
          <div>
            <p>合作对象</p>
          </div>
          <p>中邮人寿、中德安联人寿、壹钱包</p>
          <div>
            <p>品牌支持</p>
          </div>
          <p>橙营销、橙金融</p>
          <div>
            <p>服务内容</p>
          </div>
          <p>
            橙券，为保险行业客户策划精准有冲击力的营销活动，同时兼顾品牌信息传递和用户习惯的完美平衡，创意提供多面值话费、卡券产品等，覆盖更广泛的目标人群，实现流量快速转换。
          </p>
        </div>
      </li>
      <li>
        <img src="@/assets/img/case-3.png" width="427" height="540" alt="!" />
        <div>
          <h4>通信行业</h4>
          <div>
            <p>中国联通</p>
          </div>
          <p>中邮人寿、中德安联人寿、壹钱包</p>
          <div>
            <p>品牌支持</p>
          </div>
          <p>橙积分</p>
          <div>
            <p>服务内容</p>
          </div>
          <p>
            橙券充分整合360°客户视图，为联通的积分商城提供网票网、货拉拉、e袋洗等优质权益商品，并保障源源不断上新。用户在线兑换心仪商品，丰富且实用，有效提升用户个性化体验，充分发挥积分的价值。
          </p>
        </div>
      </li>
      <li>
        <img src="@/assets/img/case-4.png" width="427" height="540" alt="!" />
        <div>
          <h4>汽车行业</h4>
          <div>
            <p>重庆长安汽车</p>
          </div>
          <p>中邮人寿、中德安联人寿、壹钱包</p>
          <div>
            <p>品牌支持</p>
          </div>
          <p>橙积分</p>
          <div>
            <p>服务内容</p>
          </div>
          <p>
            橙券，是长安商城积分兑换业务的提供商之一，为商城用户提供中石化加油卡充值与话费充值服务，让用户有了新的兑换选择，有助于用户留存，加强用户对品牌的友好度，快速提升品牌曝光度和流量。
          </p>
        </div>
      </li>
      <li>
        <img src="@/assets/img/case-4.png" width="427" height="540" alt="!" />
        <div>
          <h4>传媒行业</h4>
          <div>
            <p>重庆长安汽车</p>
          </div>
          <p>华数传媒、中科数创、瑞安日报、山东广播电视台</p>
          <div>
            <p>品牌支持</p>
          </div>
          <p>橙营销</p>
          <div>
            <p>服务内容</p>
          </div>
          <p>
            橙券助力媒体行业深度营销，以数据产品的复合运用，实现程序化精准营销服务，根据品牌形象定制不同的视觉风格，形成具有互动性的曝光传播，帮助企业实现1+1>2的“品效合一”营销效果。
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'case-page',
  components: {},
  data() {
    return {}
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
/* ======= banner start ======= */
.banner {
  height: 350px;
  color: #fff;
  background: #fff url("@/assets/img/case-banner.jpg") no-repeat center/cover;
}

.banner h2 {
  margin-bottom: 24px;
  font-size: 40px;
  line-height: 40px;
  font-weight: 400;
}

.banner p {
  font-size: 20px;
  line-height: 20px;
  font-weight: 400;
}
.container {
  padding: 80px 0 48px;
}
.container li {
  display: flex;
  justify-content: space-between;
  margin-top: 76px;
  cursor: pointer;
}
.container li:not(:last-of-type) {
  border-bottom: 1px solid #f4f4f4;
}
.container li > div {
  width: 696px;
  margin: 16px 0 0 76px;
}
.container li > div > div {
  position: relative;
}
.container li h4 {
  padding-left: 24px;
  line-height: 52px;
  font-size: 22px;
  color: #333;
  background-color: #f8f8f8;
}
.container li:hover h4 {
  color: #ff7200;
}
.container li div p {
  margin-left: 30px;
  font-size: 14px;
  line-height: 24px;
  color: #666;
}
.container li div div p {
  margin: 48px 0 4px 14px;
  font-size: 20px;
  line-height: 20px;
  font-weight: 600;
}
.container li div div:before {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  height: 16px;
  top: 3px;
  left: 0;
  background-color: #ff7200;
}
.container li div p {
  line-height: 34px;
}
</style>
